Şimdi hep birlikte üc boyutlu bir resim galerisi hazırlayacağız. Profesyonel üç boyut olmayacak tabiki ama Mouse yönüne göre resimlerimize hareket yönü belirleyeceğiz.

Bildiğiniz gibi profesyonel uc boyutlar Autodesk Inventor, 3D Max gibi profesonel programlarda hazırlanabiliniyor.

Proje örneğimizi aşağıda görebilirsiniz.

Flash ile web service kullanımı

• Öncelikle flash programımıza flex'de kullanılan sdk 'ları yüklememiz gerekir.

  • Flash programını açıp. Yeni bir dökuman oluşturun.
  • File -> Publish Settings
  • flash sekmesini tıklayın
  • settings butonunu tıklayın
  • Library path sekmesini tıklayın
  • browse to SWC file butonunu tıklayın

    

  • Buradan framework.swc ve rpc.swc 'dosyalarını ekleyin. Ekranımızın görüntüsü aşağıdaki gibi olacaktır.

    

  • Artık kütüphanemiz projemize eklenmiş olacak.Ok tuşuna basarak ekranımızdan çıkalım. Ana projemize gelelim.

• Artık kodlama ekranına geçebiliriz. Frame1'e gelerek F9 tuşuna basalım. Aşağıdaki kodlamayı yapalım.

      import mx.rpc.soap.*;
      import mx.core.*;
      import mx.rpc.events.*;
  

  
  
• Ekranımıza bir adet buton yapalım. Ve butonun click olayını tanıtalım.
  
  
  • Ekrana siyah bir kare cizelim.
  • Çizilen kareyi tıklayarak F8 tuşuna basıp MovieClip nesnesine dönüştürelim.
  • Bu MovieClip üzerine gelecek bir şekilde tekrar bir kare çizelim
  • çizilen kareyi tıklayarak F8 tuşuna basalım. Bu sefer Button seçeneğini seçelim.
  • oluşturduğumuz Button nesnesini çift tıklayalım.
  • Layer1' i mouse ile tutarak Hit'e kadar sürükleyelim.
  • sahnemize geri dönelim.
  basit bir butonun yapılışını tekrar anlatmış olduk.
  
  
• Butonumuzun click olayına aşağıdaki kodlamayı yapalım.

      //Yeni bir web service tanımlıyoruz.
      var mailWebService:WebService = new WebService();
  
      //Tanıttığımız servisimizi çağırıyoruz.
      mailWebService.loadWSDL("http://www.byhasanusta.com/service.asmx?wsdl")
  
      //Servisimizin yüklenmesi bittiğinde aşağıdaki fonksiyonu çalıştırıyoruz.
      mailWebService.addEventListener("load",webserviceYuklendi)
  

• webserviceYuklendi fonksiyonunu aşağıdaki gibi hazırlayalım.

  function webserviceYuklendi(evt:LoadEvent):void
  {
  //bir Operation değişkeni tanımlıyoruz.
  var myOperation:Operation;
  
  //webservice adresimizdeki fonksiyonu çalıştırıyoruz.
  myOperation = Operation (mailWebService.getOperation("mailGonder"));
  
  //web service hata verirse faultEvent fonksiyonunu çağırıyoruz.
  myOperation.addEventListener("fault",webfault);
  
  //web service tamamlanınca resultEvent fonksiyonunu çağırıyoruz.
  myOperation.addEventListener ("result",webResult);
  
  //webservice' mizin yapısına göre parametre gönderiyoruz.
  myOperation.send(param1,param2,param3,mailadresi)
  }
  

• webFault ve webResult fonksiyonları.

  function webFault (evt:FaultEvent):void
  {
  //hatayı trace komutu ile ekrana yazdırıyoruz. Dilerseniz bir text atayabilirsiniz.
  trace(evt.fault);
  }
  function webResult (evt:ResultEvent):void
  {
  //Dönen sonucu trace komutu ile yazdırıyoruz.
  trace(evt.result);
  }
  

Yapılması gerekenlerin hepsi Bu. bu şekilde bir webservice ile iletişime rahatlıkla geçebiliriz. Hatta geri gelen dataları işleyerek kullanabiliriz. Bu çok ayrıntılı bir konu olduğundan daha sonra yazılarımda yer vereceğim.

Bu adresten indirebilirsiniz :

1. Öncelikle programı indirip bilgisayarımıza yükleyelim.

2. flashDevelop programızı açalım.

File->New->AS3 Document

package 
{
	
	/**
	$(CBI)* ...
	$(CBI)* @author ...
	$(CBI)*/
	public class  
	{
		
	}
	
}

3.

package 
{
	import flash.display.MovieClip;
	
	/**
	$(CBI)* ...
	$(CBI)* @author ...
	$(CBI)*/
	public class  flashDevelopORNEK extends MovieClip
	{
		
	}
	
}

class ismimizi gördüğünüz gibi flashDevelopORNEK extends MovieClip olarak belirledik. Bu arada dikkat ettyiysenin program üst tarafa import flash.display.MovieClip; ekledi. Bunun anlamı özetle ben bu kodlamada MovieClip nameSpace'ine ait kodları kullanacağımdır.

4. Daha sonra fonksiyonumuzu aynı isimde tanımlıyoruz. Bu fonksiyon program akışının başlıyacağıfonksiyondur.

package 
{
	import flash.display.MovieClip;
	
	/**
	$(CBI)* ...
	$(CBI)* @author ...
	$(CBI)*/
	public class  flashDevelopORNEK extends MovieClip
	{
		public function flashDevelopORNEK():void
		{
			
		}
		
	}
	
}

fonskiyonumuzu public function flashDevelopORNEK():void şeklinde belirledik. Class ismimizle aynı olmasına dikkat edelim.

Bu dosyayı flash dosyamızın bulunduğu dizine kaydetmemiz gerekir.

Gelelim flash dosyamıza. Flash editörünü açalım. Yeni bir Flash Document oluşturalım. Bu dosyayıda .as dosyamızın olduğu klasöre kayıt edelim.

6. Evet şimdi yapmamız gerek sadece 1 adım kaldı. Flash Document'e gelelim ve sağ tarafta bulunan Properties seçeneğinden class yazan edit kutusuna flashDevelopORNEK yazalım. Sağ tarafındaki kaleme tıklıyalım.

Herşey doğruysa flash editörümüz .as dosyamızı açacaktır.

Artık rahat bir şekilde kodlarımızı yazabiliriz.

Bu herşeyin doğru olup olmadığı testi idi. Asıl kodlama ekranımız Flash Develop editörüdür.

Flash'da dinamik veri oluşturmak mümkündür. Dinamik veri derken gösterilecek bilginin sürekli güncel kalması ve bu güncellemeninde otomatik olarak bir dosyadan yapılmasının sağlanması olayıdır.

Flash' da kod yazmak için kolaylık olması açısında flash develop editörünü kullanıyorum. Fikir sahibi olmak isterseniz Buradan bakabilirsiniz.

Projeye hazırlık.

• Flash dosyasının hazırlanışı
• Flash Develop dosyasının hazırlanışı
• XML dosyamızı hazırlanışı
• Resimlerin ayarlanışı
• Kodlamaya geçiş

• Flash dosyasının hazırlanışı

  Öncelikle flash programımızı açıyoruz. Yeni bir document oluşturuyoruz. Bu dosyayı xmlVeriCekme.fla olarak kayıt ediyoruz.
  

  Not:Kayıt ettiğimiz dosyanın bulunduğu klasörde XML, .as, .fla dosyalarımız olacak.

• Flash Develop dosyasının hazırlanışı

  • Flash develop editörümüzü açıyoruz.
  • File -> New -> AS3 Document seçiyoruz. Gördüğünüz gibi yeni bir as3 dosyası oluşturuldu.
  • public class'ımızı public class xmlVeriCekme extends MovieClip şeklinde ayarlıyoruz.
  • Akışı başlatacak fonksiyonumuzu oluşturuyoruz. public function xmlVeriCekme ():void
  • dosyamızı .fla dosyamızın bulunduğu klasöre kayıt ediyoruz.
  • flash dökümanımıza gelerek class ismini as dosyamızın ismini veriyoruz. Yani xmlVeriCekme olarak tanıtıyoruz.

  Gördüğünüz gibi .fla ve .as dosyalarımızı oluşturduk.

• XML dosyamızın hazırlanışı

  XML dosyamızı hazırlamak için notepad editörünü kullanabiliriz. Yapıyı aşağıdaki gibi hazırlayalım.

  XML dosyamız :

  Dosyamızı .as, .fla dosyalarımızın yanına xmlVeriCekme.xml olarak kayıtedelim. Ben burada sadece 4 adet resim için XML dosyası hazırladım dilerseniz bu sayıyı artabilirsiniz. Hiç problem olmayacaktır.

• ayarladığımız 4 adet resmi dosyalarımızı koyduğumuz klasörün altında img klasörü açalım ve buraya atalım. Resimlerimizin aynı boyutta olması daha iyi olacaktır.

klasör yapımız aşağıdaki gibi olacaktır.



• Sıra geldi kodlamaya geçiş.

  • Özetle bunları yapacağız;
    • XML dosyamızı yükleyeceğiz
    • XML dosyamızın içerisindeki dosya yolunu kullanarak loader nesnesi ile image dosyalarımızı çekicez
    • Bunları teker teker sahnemize eklyeceğiz.
    • Ve animasyon yapacağız.
  • Flash develop editörümüze gelelim. Aşağıdaki kodlamayı yapalım. Kod' ların yanında açıklamalarını yazdım.

  
      package 
  {
  	import flash.display.Loader;
  	import flash.display.MovieClip;
  	import flash.events.Event;
  	import flash.net.URLLoader;
  	import flash.net.URLRequest;
  	import fl.transitions.Tween;
  	import fl.transitions.TweenEvent;
  	import fl.transitions.easing.*;
  	
  	
  	public class xmlVeriCekme extends MovieClip
  	{
  		public var xmlResim:XML; //genel kullanım için öncelikle bir xmlResim Değişkeni tanımlıyoruz.
  		public var xmlResimUzunlugu:int; //xmlResim nesnemizin uzunluğunu tutmak için tanımlama yaptık.
  		public var frame:uint = 0; //frame' i dinlemek için "frame" değişkeni tanımlıyoruz ve 0' ıncı kareden başlamasını istiyoruz.
  		public var resimLoader:Loader; //Resim yükleme için Loader nesnesi tanımlıyoruz.
  		public var a:uint = 0; //Bu değişken ile kaçıncı resimde olduğumuzu tespit edeceğiz.
  		public var rootPath:String; //XML dosyamızdaki resimlerin hangi klasörden çekileceğini bulmak için tanımlanan string değişkeni.
  		
  		public function xmlVeriCekme ():void
  		{
  			//xml dosyamızı çağırmak için URLLoader nesnesi tanımlıyoruz.
  			//URLLoader : text tabanlı dosyaları çağırmak amaçlı kullanılır.
  			//Loader : resim içerikli dosyaları (.jpg, .png) gibi çağırmak için kullanılır.
  			//URLLoader dosyasına request nesnesini atıyoruz.
  			//URLRequest içeriğindeki dosyamızı URLLoader nesnesine taşır.
  			
  			var xmlLoader:URLLoader = new URLLoader (new URLRequest("image/ornekler/xmlVeriCekme.xml"))
  			
  			//xmlLoader nesnemiz yüklendiğinde ilgili fonksiyonu çalıştırıyoruz
  			xmlLoader.addEventListener(Event.COMPLETE, 	xmlLoaderYuklendi);
  			
  			
  		}
  		
  		public function xmlLoaderYuklendi (evt:Event):void
  		{
  			//Tanımladığımız xml nesnesine xmlLoader'a yüklenen dosya içeriğini atıyoruz. 
  			//Bunun için yeni bir XML nesnesi oluşturduk (new XML)
  			//Şu andan itibaran xmlResim nesnemizin içerisinde bizim XML dosyamızın içeriği bulunmakta.
  			xmlResim = new XML (evt.target.data);
  			//XmlResim dosyamızın içindeki node' ların uzunluğunu xmlResimUzunlugu değişkenimize atıyoruz.
  			xmlResimUzunlugu = xmlResim.node.length();
  			
  			//Resim klasörüne erişiyoruz.
  			rootPath = xmlResim.@rootPath;
  			
  			//Bu aşamda resimlerimize animasyon vermiyeceksek for döngüsü ile sahnemize eklyebiliriz. 
  			//Fakat bu örnekte animasyon kullanacağımızdan Yani resimleri teker teker görmek istediğimizden dolayı 
  			//ENTER_FRAME Event' ından yararlanacağız.
  			
  			//Sahneye EnterFrame Event tanımlıyoruz.
  			addEventListener(Event.ENTER_FRAME, resimleriEkle)
  			
  			
  		}
  		
  		function resimleriEkle(evt:Event):void
  		{
  			frame += 1; //sahnemiz hareket halinde iken her seferinde frame değişkenimizi 1 arttıryoruz.
  			
  			if (frame == 1) //frame bir de dosya yüklemesi yapacağız.
  			{
  				//Tanımladığımız resimLoader nesnesinden yeni bir tane oluşturup dosyamızın yolunu bildiriyoruz.
  				// dosyamızın yolu resimXML nesnemizde kayıtlı.
  				resimLoader = new Loader () ;
  				resimLoader.load(new URLRequest(rootPath + xmlResim.node[a].@path));
  				
  				//yüklenen resmi sahneye eklemek için resimYuklemeTamam fonksiyonundan yararlanıyoruz.
  				resimLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, resimYuklemeTamam);
  				
  				
  				
  			}
  			if (frame == 120) //yani 5 sn. sonra yüklediğimiz dosyayı kaldıracağız.
  			{
  				//Yüklenen resmi sahneden kaldırıyoruzki yeni resim geldiğinde üstüne binmesin.
  				removeChildAt(0) 
  				//Bir sonraki resmi yüklemek için a değişkenini 1 arttırıyoruz.
  				a += 1;
  				
  				//frame' i sıfırlıyoruz ki olaylar tekrarlansın.
  				frame = 0;
  				
  				//eğer a değişkeni xmlResim dosyamızın node uzunluğuna geldiyse.
  				//yani resimler bittiyse. Tekrar baştan başlatıyoruz.
  				if (a == xmlResimUzunlugu) 
  				{
  					
  					a = 0;
  					
  				}
  			}
  		}
  		
  		function resimYuklemeTamam (evt:Event):void
  		{
  			//Resim taşmasını engellemek için resim yüklendikten sonra boyutlarını
  			//sahne boyutuna göre ayarlıyoruz.
  			resimLoader.width = stage.stageWidth;
  			resimLoader.height = stage.stageHeight;
  			
  			//animasyon yapacağımızdan dolayı sahnede gözükmeyen bir yere ekliyoruz. Yani soltaraftan -700 uzaklıkta.
  			resimLoader.x=-700;
  
  			//sahneye ekliyoruz. Ama şu an gözükmüyor. Çünkü x=-700 verdik.
  			addChild (resimLoader)
  			
  			//animasyon fonksiyonuna yönlendiriyoruz.
  			animasyonYap();
  		}
  
  	function animasyonYap():void
  		{
  			//Yeni bir tween tanımlıyoruz. Bu tween resimLoader' ın x pozisyonunu -700'den 0'a getirecek ve 
  			//bunları 2 saniyede yapacak. Bunları yaparken Bounce.easeOut efekti uygulayacak. Yani çarpıp geri gelme.
  			var tw1:Tween = new Tween (resimLoader,"x",Bounce.easeOut,-700,0,2,true);
  			
  			//Animasyon bittiğinde animasyonBitti fonksiyonunu çalıştıracağız.
  			tw1.addEventListener(TweenEvent.MOTION_FINISH,animasyonBitti)
  			
  		}
  		
  		public function animasyonBitti(evt:TweenEvent):void
  		{
  			//Bu fonksiyonda resimLoader nesnemizi sahneden sağ taraftan çıkartacaktır.
  			//Bütün bunlar 4 sn. içinde olacak. Beşinci saniyede olaylar tekrarlanmaya başlayacak.
  			//EnterFrame Event 'den dolayı.
  			var tw2:Tween = new Tween (resimLoader,"x",Bounce.easeIn,0,700,2,true);
  		
  		}
  		
  	}
  	
  }
  
  

Flash AS3 ile XML' den veri çekme olayını tamamlamış olduk.

Bunun için bir urlRequest nesnesi tanımlayıp yönlenecek siteyi belirtmemiz gerekir.

var req:URLRequest = new URLRequest ("http://www.byhasanusta.com")
navigateToURL(req,"_blank")

_blank (Boş bir sayfaya yönlendirir.)
_parent (Bulunduğumuz sayfada açar.)